(function(host){

var mvc = host.mvc;

function CreateViewRect(conf){

	conf = conf || {};
	var LAYER = null;
	var MODEL = null;

	var container = new mvc.core.View({
		name: 'ul'
	}, 'container');
	conf.className && container.addClass(conf.className);

	var rect = {
		left:
			new mvc.core.InputView({
				name: 'input', attrs: { type: 'number' }
			}, 'left', container.__id),
		top:
			new mvc.core.InputView({
				name: 'input', attrs: { type: 'number' }
			}, 'top', container.__id),
		width:
			new mvc.core.InputView({
				name: 'input', attrs: { type: 'number', min: 0 }
			}, 'width', container.__id),
		height:
			new mvc.core.InputView({
				name: 'input', attrs: { type: 'number', min: 0 }
			}, 'height', container.__id)
	};


	var ctrl = new mvc.core.InputController();

	container.$each = function(fn){
		fn = fn.bind(this);
		util.each(rect, fn);
		return this;
	};
	container.attach = function(layer){

		this.detach();

		LAYER = layer;
		MODEL = LAYER.valueOf();
		this.$each(function(input, key){
			MODEL.bind(key, ctrl, input);
		});
		return this;
	};
	container.detach = function(){
		LAYER = null;
		if(MODEL){
			this.$each(function(input, key){
				// console.log(MODEL)
				MODEL.unbind(key, function(tar){
					return tar[0] === ctrl && input === tar[1];
				});
			});
		}
		return this.clearValue();
	};

	container.set = function(key, val){
		if(!(key in rect)) return;
		rect[key].val(val);
		return this;
	};

	container.size = function(w, h){
		if(util.isObject(w)){
			return container.size(w.width, w.height);
		} else {
			viewRectTool.set('width', w);
			viewRectTool.set('height', h);
			return this;
		}
	};
	container.position = function(x, y){
		if(util.isObject(x)){
			return container.position(x.left, x.top);
		} else {
			viewRectTool.set('left', x);
			viewRectTool.set('top', y);
			return this;
		}
	};

	container.clearValue = function(){
		this.$each(function(input){ input.val(''); });
		return this;
	};
	container.addItem = function(domConf, labelText, itemConf){
		var item = this.createItem(labelText, itemConf);
		if(domConf){
			if(util.isArray(domConf)){
				var frag = document.createDocumentFragment();
				domConf.forEach(function(conf){
					frag.appendChild(mvc.createElement(conf))
				});
				item.appendChild(frag);
			} else {
				item.appendChild(mvc.createElement(domConf));
			}
		}
		return item;
	};

	container.createItem = function(labelText, itemConf){

		var conf = { name: 'li' };
		if(itemConf){
			if(util.isString(itemConf)){
				conf.className = itemConf;
			} else if(util.isObject(itemConf)){
				util.each(itemConf, function(v, p){
					if(p == 'name') return;
					conf[p] = v;
				})
			}
		}

		var li = mvc.createElement(conf);
		this.append(li);
		if(labelText){
			var label = mvc.createElement({ name: 'label' });
			var span = mvc.createElement({ name: 'span' });
			span.innerHTML = labelText;
			label.appendChild(span);
			li.appendChild(label);
			return label;
		} else {
			return li;
		}
	};

	var dic = conf.dic || {};

	container.$each(function(input, key){
		input.oninput = function(val){ LAYER && LAYER[key](val); };
		var item = this.createItem(dic[key] || key);
		input.appendTo(item);
	});

	return container;
}

mvc.CreateViewRect = CreateViewRect;

})(window);